<#assign pageTitle="订单中心"/>
<#assign pageHeader>
    <link rel="stylesheet" type="text/css" href="/static/h5/css/user.css?20220210"/>
</#assign>
<#assign pageContent>
    <van-nav-bar
            title="我的订单"
            left-text="返回"
            left-arrow
            @click-left="location.href='/user/index.html';"
            fixed
            placeholder
    ></van-nav-bar>
    <div class="main-item mt-12 mb-12">
        <#list orderList as order>
        <div class="order-list">
            <div class="list-top">
                <span class="fl">${order.orderNo!}</span>
                <span class="fr">
                    <#if order.status=='SUCCESS'>
                        <span>已成功</span>
                    <#elseif order.status=='INIT'>
                        <span>待支付</span>
                    <#elseif order.status=='CANCEL'>
                        <span>已取消</span>
                    <#elseif order.status=='REFUND'>
                        <span>已退款</span>
                    </#if>

                </span>
            </div>
            <#list order.orderDetailList as detail>
            <div class="list-middle">
                <a target="_blank" <#if order.orderType=='COURSE'>
                    href="/course/view/${detail.courseId!}.html"
                   <#elseif order.orderType=='BOOK'>
                            href="/book/view/${detail.courseId!}.html"
                   <#elseif order.orderType=='PICTURE'>
                            href="/picture/view/${detail.courseId!}.html"
                   </#if>>
                <#if order.orderType=='ACCOUNT'>
                    <img class="list-img" src="/static/images/order-account.jpg" alt="">
                <#elseif detail.courseImgUrl??>
                    <img class="list-img" src="${detail.courseImgUrl}" alt="">
                <#else>
                    <img class="list-img" src="${order.imgUrl!'/static/h5/images/course/article-list-3.jpg'}" alt="">
                </#if>
                </a>
                <div class="list-info">
                    <h3>
                        ${detail.courseName!}
                    </h3>
                    <p>

                    </p>
                </div>
            </div>
            </#list>
            <div class="order-list-footer">
                <div class="fl price">￥${order.payAmount/100.0}</div>
                <span class="fl order-time">
                    ${order.createTime!}
                </span>
                <div class="fr">
                    <#if order.status=='INIT'>
                        <van-button round type="default" @click="orderCancel(${order.orderId})">取消</van-button>
                        <van-button round type="info" @click="orderRepay(${order.orderId})">重新支付</van-button>
                    <#elseif order.status=='CANCEL'>
                    <#--    <van-button round type="default">删除</van-button>-->
                        <#--van-button round type="info">再次购买</van-button-->
                    <#elseif order.status=='REFUND'>
                        <#--van-button round type="info">再次购买</van-button-->
                    </#if>
                </div>
            </div>
        </div>
        </#list>
        <van-empty description="您还没有订单..." v-if="pageCount == 0"></van-empty>
        <div style="padding: 0 12px"><van-button  type="info" size="large" v-if="pageCount == 0" url="/course/index.html">开始学习</van-button></div>
    </div>
    <van-pagination v-model="currentPage" :page-count="pageCount" mode="simple" class="mb-12 pd-12" @change="pageChange"></van-pagination>
</#assign>
<#assign pageScript>
    <script type="text/javascript" src="/static/libs/jquery/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="/static/libs/layer/layer.js"></script>
    <script type="text/javascript" src="/static/js/wxJSAPI.js"></script>
    <script type="text/javascript" src="/static/h5/js/order-h5.js"></script>
    <script>
        var pageCount = ${totalPages};
        var currentPage = ${page.currentPage};
        new Vue({
            el: '#app',
            data() {
                return {
                    showFooter: false,
                    pageCount: pageCount,
                    currentPage: currentPage
                }
            },
            methods: {
                pageChange(value) {
                    window.location.href = '/user/order/list.html?page=' + value;
                },
                orderCancel(orderId) {
                    var that = this;
                    var data = new FormData();
                    data.append("orderId", orderId);
                    axios.post('/user/order/cancel.json', data).then(function (json) {
                        if (json.data.code === 0) {
                            that.$toast('订单取消成功...');
                            location.reload();
                        } else {
                            that.$toast.fail(json.data.msg);
                        }
                    })
                },
                orderRepay(orderId) {
                    orderRepay(orderId, "WXPAY");
                }
            }
        });
    </script>
</#assign>
<#include "../layout_h5.ftl" />